<template>
  <div>
    <!-- @selection-change="selectionChange" 多选状态事件
      @current-change="currentChange" 当前的页数
      @size-change="sizeChange" 每页显示条数
      @row-save="rowSave" 添加事件
      @row-update="rowUpdate" 编辑事件
      @row-del="rowDel" 删除事件
      @batch-delete="batchDelete" 批量删除事件
      @before-open="beforeOpen" 请求详情
      @on-load="onLoad" 初始化事件
       -->
    <ComCrud
      ref="comCrud"
      :loading="loading"
      :data="data"
      :option="option"
      :page.sync="page"
      :form="form"
      :query="query"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @batch-delete="batchDelete"
      @before-open="beforeOpen"
      @search-reset="searchReset"
      @search-change="searchChange"
      @on-load="onLoad"
    >
      <!-- 自定义表头 prop + 'Header' -->
      <template v-slot:accountHeader="{ column }">{{
        "自定义表头:" + column.label
      }}</template>
      <!-- 自定义表格 -->
      <template v-slot:account="{ row }">
        {{ "自定义表格:" + row.account }}
      </template>
      <!-- 自定义左侧按钮 -->
      <template slot="menuLeft">
        <el-button
          :size="option.btnSize"
          type="danger"
          @click="$refs['comCrud'].rowSave()"
          >自定义左按钮</el-button
        >
      </template>
      <template slot="menuRight">
        <el-button :size="option.btnSize" type="danger">自定义右按钮</el-button>
      </template>
      <!-- 自定义操作栏按钮 -->
      <template v-slot:menu="{ row }">
        <el-button :size="option.btnSize" type="text" @click="onEvent(row)"
          >自定义操作栏按钮</el-button
        >
      </template>
    </ComCrud>
  </div>
</template>

<script>
import ComCrud from "./components/com-crud.vue";
import { getList, add, remove, update, getDetail } from "@/apis/test-api.js";

export default {
  components: { ComCrud },
  data() {
    const validatePhone = (rule, value, callback) => {
      const str = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
      if (!value) {
        return callback(new Error("号码不能为空"));
      } else if (!str.test(value)) {
        return callback(new Error("请输入正确手机号码!!"));
      } else {
        callback();
      }
    };
    return {
      // 加载状态
      loading: true,
      // 表单数据
      form: {},
      // 自定义搜索栏使用
      query: {},
      // 分页
      page: {
        // 【必填】
        pageSize: 10,
        currentPage: 1,
        // pageSizes: [5, 20],
        total: 0,
      },
      // 数据 【必填】
      data: [],
      // 多选参数
      selectionList: [],
      // 表单配置 配置时可以直接使用 element 组件属性
      option: {
        // size: "mini", // 组件尺寸 small
        // index: true, // 是否显示序号 true
        // selection: true, // 是否显示多选按钮 true
        // height:250,// 表单高度 auto
        // pagination: true, // 是否显示分页 true
        // labelWidth: '150px', // 表单标题宽度
        // searchAlign: "right", // 搜索表按钮位置 center
        // headerAlign:'right', // 表头位置 left
        // align:'right', // 列位置 left
        // 操作配置
        // operation: false, // 是否显示操作列 true
        operationWidth: "320px", // 操作列宽度 180px

        // 弹窗配置
        // dialogWidth: "60%", // 弹窗宽度 60%

        // 确认按钮
        // submitBtn: true, 弹窗确认按钮 true
        // submitBtnIcon: "",
        // submitBtnText: "确认",

        // // 取消按钮
        // cancelBtn: true,
        // cancelBtnIcon: "",
        // cancelBtnText: "取消",

        // 添加按钮
        // addBtn: true, // 是否显示按钮 true
        // addBtnText: "添加", // 按钮文字
        // addBtnIcon: "el-icon-plus", // 按钮图标

        // 批量删除按钮
        // batchDelBtnText: "批 量 删 除",
        // batchDelBtnIcon: "el-icon-delete",

        // 操作配置
        exportBtn: true, // 是否显示按钮 true
        // exportBtnIcon: "el-icon-download", // 按钮图标

        // 查看按钮
        // viewBtn: true, // 是否显示按钮 true
        // viewBtnText: "查看",
        // viewBtnIcon: "el-icon-view",

        // 编辑按钮
        // editBtn: true, // 是否显示按钮 true
        // editBtnText: "编辑",
        // editBtnIcon: "el-icon-edit",

        // 删除按钮
        // delBtn: true, // 是否显示按钮 true
        // delBtnText: "删除",
        // delBtnIcon: "el-icon-delete",

        // 表单列配置 【必填】
        column: [
          {
            type: "Input", // 组件类型 Input
            value: "999", // 默认值
            label: "账户", // 列标题【必填】
            prop: "account", // 列标题的内容属性名称【必填】
            placeholder: "请输入账户", // 空状态显示
            // width: 200, // 对应列的宽度 auto
            search: true, // 是否为搜索项 false
            addDisplay: false, // 表单新增时项是否显示 true
            editDisplay: true, // 表单编辑时项是否显示 true
            viewDisplay: true, // 表单查看时项是否显示 true
            clearable: true, // 是否可清空 true
            // fixed: "left", // fixe 固定 false
            overHidden: false, // 当内容过长被隐藏时显示 tooltip true
            // span: 8, // 输入宽度 12
            focus: () => {
              console.log("--- 获取了焦点");
            }, // 获取焦点事件
            rules: [{ required: true, message: "请输入内容", trigger: "blur" }], // 校验条件
          },
          {
            type: "Select",
            label: "部门",
            prop: "deptName",
            value: 2,
            // search: true, // 是否为搜索项 false
            change: (e) => {
              console.log("change", e);
            },
            props: {
              label: "check",
              value: "code",
            },
            dicData: [
              {
                check: "A部门",
                code: 1,
              },
              {
                check: "B部门",
                code: 2,
              },
            ],
            rules: [{ required: true, message: "请选择部门", trigger: "blur" }],
          },
          {
            type: "TimePicker",
            label: "创建时间",
            prop: "createDate",
            placeholder: "选择时间",
            disabled: true,
            pickerOptions: {
              start: "08:30",
              step: "00:15",
              end: "18:30",
            },
            rules: [
              { required: true, message: "时间不能为空", trigger: "blur" },
            ],
          },
          {
            type: "Radio",
            value: 1,
            label: "性别",
            prop: "sex",
            // span: 24,
            change: (e) => {
              console.log("change", e);
            },
            props: {
              label: "type",
              value: "sn",
            },
            dicData: [
              {
                type: "未知",
                sn: 3,
              },
              {
                type: "男",
                sn: 1,
              },
              {
                type: "女",
                sn: 2,
              },
            ],
            rules: [
              { required: true, message: "请选择单选按钮", trigger: "blur" },
            ],
          },
          {
            type: "Checkbox",
            label: "复选框",
            prop: "checkData",
            value: [1],
            search: true, // 是否为搜索项 false
            // disabled: true,
            change: (e) => {
              // console.log("change", e);
            },
            // value: [],
            props: {
              label: "type",
              value: "sn",
            },
            dicData: [
              {
                type: "未知",
                sn: 3,
              },
              {
                type: "男",
                sn: 1,
              },
              {
                type: "女",
                sn: 2,
              },
            ],
            rules: [
              { required: true, message: "复选框不能为空", trigger: "blur" },
            ],
          },
          {
            type: "Switchs",
            label: "开关",
            // value: true,
            prop: "witchs",
            rules: [{ required: true, message: "请选择开关", trigger: "blur" }],
          },
          {
            type: "Silder",
            label: "滑块",
            prop: "num",
            value: 50,
            span: 24,
          },
          // {
          //   label: "单图",
          //   prop: "img",
          //   type: "uploadImg",
          //   listType: "picture-img",
          //   span: 24,
          //   propsHttp: {
          //     home: "https://avuejs.com",
          //   },
          //   tip: "只能上传jpg/png用户头像，且不超过500kb",
          //   action: "/imgupload",
          //   search: true, // 是否为搜索项 false
          // },
          {
            prop: "name",
            label: "名字",
            // value: "张三",
            search: true, // 是否为搜索项 false
          },
          {
            type: "InputNumber",
            prop: "phone",
            label: "电话",
            editDisplay: false,
            controls: true,
            placeholder: "输入电话",
            change: (val) => {
              console.log("val", val);
            },
            rules: [
              { required: true, validator: validatePhone, trigger: "blur" },
            ],
          },
        ],
      },
    };
  },
  computed: {
    ids() {
      return this.selectionList
        .reduce((map, b) => {
          map.push(b.id);
          return map;
        }, [])
        .join(",");
    },
  },
  watch: {},
  methods: {
    // row: 数据,type: 操作列事件类型
    onEvent(row, type) {
      console.log("value1", row, type);
    },

    // 添加
    // row:表单数据 done:关闭弹窗并清空数据 loading: 关闭弹窗
    rowSave(row, done, loading) {
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },

    // 修改
    rowUpdate(row, done, loading, index) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          console.log(error);
        }
      );
    },

    // 删除
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },

    // 批量操作
    batchDelete() {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },

    // 编辑或查看详情之前
    beforeOpen(row, type, done) {
      if (["edit", "view"].includes(type)) {
        getDetail(row.id).then((res) => {
          this.form = res.data;
          done();
        });
      }
    },

    // 多选
    selectionChange(list) {
      console.log("多选", list);
      this.selectionList = list;
    },

    // 清空
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },

    // 查询
    searchChange(params, done) {
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },

    // 当前的页数
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },

    // 每页显示条数
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },

    // 初始化
    onLoad(page, params = {}) {
      this.loading = true;
      getList({
        currentPage: page.currentPage,
        pageSize: page.pageSize,
        params: Object.assign(params, this.query),
      }).then((res) => {
        setTimeout(() => {
          this.loading = false;
        }, 1000);
        this.data = res.data.list;
        this.page.total = res.data.total;
      });
    },
  },
};
</script>